<!--
* button按钮的封装
* 支持：按钮大小设置【large,small,mini】
* 支持：按钮类型设置【primary,warning,success,info,danger,default，text】
* 支持：禁用
* 支持：朴素按钮
* 支持：圆角按钮
* 支持：圆形按钮
* 支持：icon图标，icon图标位置【left,right】
-->
<template>
  <button class="lc-button"
          :class="classes"
          :disabled="disabled"
  >
    <lc-icon class="icon loading" name="lc-icon-icon_loading" v-if="loading"></lc-icon>
    <lc-icon v-if="icon && !loading" class="icon" :name="icon"></lc-icon>
    <span class="content">
       <slot></slot>
    </span>
  </button>
</template>
<script lang="ts">
import { computed } from 'vue'
import LcIcon  from '../Icon.vue'
export default {
  name: "LcButton",
  components: {
    LcIcon
  },
  props:{
    loading: Boolean, // 加载中
    icon:{ // 按钮中加入图标，非必填元素，默认为''
      type:String,
      required:false,
      default:''
    },
    iconPositon:{ // 按钮中图标的位置，非必填，默认为left
      type:String,
      required:false,
      // default:''
    },
    disabled:{ // 按钮是否被禁用，默认不禁用
      type:Boolean,
      required:false,
      default:false
    },
    plain:{ // 朴素按钮
      type:Boolean,
      required:false,
      default:false
    },
    radius:{ // 圆角按钮
      type:Boolean,
      required:false,
      default:false
    },
    circular:{ // 圆形按钮
      type:Boolean,
      required:false,
      default:false
    },
    size: { // 按钮的大小
      type: String,
      require: false,
      // default: 'small'
    },
    type: { // 按钮的类型
      type: String,
      require: false,
      default: 'default'
    },
    long: { //长按钮
      type: Boolean,
      require: false,
      default: false
    }
  },
  setup(props){
    const { type, size, disabled, plain, radius, circular, iconPositon, loading, long } = props
    //通过计算属性获取类名
    const classes = computed(()=>{
      return {
        [`lc-button-${size}`]:size,
        [`lc-button-${type}`]:type,
        [`is-disabled`]: disabled,
        [`is-plain`]: plain,
        [`is-radius`]: radius,
        [`is-circular`]: circular,
        [`icon-${iconPositon}`]: iconPositon,
        [`is-loading`]: loading,
        [`lc-button-long`]: long
      }
    })
    return { classes }
  }
}
</script>

<style lang="scss" scoped>
  @keyframes spin{
     0%{
       transform: rotate(0deg);
     }
     100%{
       transform: rotate(360deg);
     }
   }
  .loading{
    animation: spin 3s linear infinite;
  }
.lc-button-long {
  width: 100%;
}
</style>
